<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@page import="com.zkingsoft.constance.SystemConstance"%>
<%@ taglib uri="http://www.zkingsoft.com" prefix="matrix"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>主页</title>
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style type="text/css">
.breadcrumb{
	padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.hot_news{
	overflow:hidden;
	padding:15px 0 21px;
	zoom:1;
	width: 32%;
    float: left;
}
.hot_news a{text-decoration:none;}
.hot_news a em,.hot_news a strong,.hot_news a span,.hot_news a img{
	display:block;
	text-decoration:none;
}
.hot_news a h3{color:#000;font:normal 20px/24px Arial, Helvetica, SimHei; padding:0 0 16px 0;}
.hot_news a em{color:#666;font:16px/20px Arial, Helvetica, SimHei;}
.hot_news a img{float:left;padding:0px 10px 0 0;}
.hot_news a span{color: #666;
    font: 13px/16px Arial, Helvetica, SimSun;
    /* word-wrap: break-word;
    word-break: break-all; */
    display: block;
    width: 212px;
    height: 16px;
    overflow:hidden;
    text-overflow:ellipsis; 
    
				}
.hot_news a em.more{color:#bf2318;font:13px/16px Arial, Helvetica, SimHei;padding-top:8px; padding-left:0px;}
.hot_news a:hover em.more{text-decoration:underline;}

#nav{ height:140px; margin:0 auto; /* background:#f3f3f4; */}
#nav ul{ float: right;
    margin-right: 52px;
    margin-top: 45px;}
#nav ul li{list-style:none; float:right; line-height:50px; width:86px; text-align:center; font-weight:bold; font-size:18px;}
#nav ul li:hover{border-bottom:2px solid #5197d0;}
#nav ul li a{ color:#0061b0;}
#nav ul li a.hover{ color:#676a6c; text-decoration:none;}
.b1 img{    width: 240px;
    height: 115px;
    float: left;
    margin-left: 76px;
    margin-top: 12px;
    cursor: pointer;}
</style>
</head>

<body>
	<div id="nav">
		<div class="b1"><img src="${path }/resource/images/logo.png"/></div>
		<ul>
			<li><a href="lin/newsContactUs-list">联系我们</a></li>
			<li><a href="lin/newsHelp-list">帮助</a></li>
			<li><a href="lin/newsReferral-list">宣介</a></li>
			<li><a href="lin/newsNotice-list">公告</a></li>
<!-- 			<li><a href="#">视频</a></li> -->
	    </ul>
	</div>
	<div class="ibox-content radius-5  mpanel">
		<h3>工厂监控</h3> 	
		<div style="width: 100%; height:200px" id="newsSP">
		</div>
	</div>
<%-- 	<matrix:btn value="newsReferral:search"> --%>
		<div class="ibox-content radius-5 mpanel">
<!-- 			<h3>最新宣介</h3> -->
			<div class="container" style="width: 100%;" id="newsListxj">
			</div>
		</div>
<%-- 	</matrix:btn> --%>
<%-- 	<matrix:btn value="newsNotice:search"> --%>
		<div class="ibox-content radius-5 mpanel">
			<h3>最新资讯</h3> 	
			<div class="container" style="width: 100%;" id="newsListzx">
			</div>
		</div>
<%-- 	</matrix:btn> --%>

	
</body>
<script type="text/javascript">
$('#yourElement').addClass('animated rotateInUpLeft');
</script>
<script type="text/javascript" src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript">
		var myGrid;
		$(function() {
			var html = "";
			$.ajax({
				url : '${path}/admin/webArticle/getShouYeListByType',
				type : 'POST',
				data : {
					typeId : "<%=SystemConstance.ART_TYPE_NOTICE%>"
				},
				dataType : 'json',
				async : false,
				success : function(res) {
					var dataList = res.rows;
					$.each(dataList, function(i) {						
						var artImage = "${path }/resource/images/nullImg.jpg";
						if(dataList[i].artImage) {
							artImage = dataList[i].artImage;
						}
						
						html += '<div class="hot_news"><a href="javascript:void(0);" onclick="openDetail('
							+ dataList[i].artId
							+ ')"><h4>' + dataList[i].artTitle + '</h4>'
							+ '<img src="' + artImage + '" alt="' + dataList[i].artTitle + '" height="140" width="250">'
							+ '<nobr><span>'+ dataList[i].artAbstract +'</span></nobr>'
							+ '<em class="more">查看详情 <var>»</var></em></a></div>';
					});
					$('#newsListzx').html(html);
				}
			})
			
		});

		function openDetail(id) {
			layer.full(
				layer.open({
					type : 2,
					title : "公告详情",
					area : [ MUI.SIZE_L, '600px' ],
					maxmin : true,
					content : [ '${path}/admin/webArticle/toNewsForm?id=' + id ]
				})
			);
		}
	</script>

	<script type="text/javascript">
		var myGrid;
		$(function() {
			var html = "";
			$.ajax({
				url : '${path}/admin/webArticle/getShouYeListByType',
				type : 'POST',
				data : {
					typeId : "<%=SystemConstance.ART_TYPE_REFERRAL%>"
				},
				dataType : 'json',
				async : false,
				success : function(res) {
					var dataList = res.rows;
					$.each(dataList, function(i) {			 				 
						var artImage = "${path }/resource/images/nullImg.jpg";
						if(dataList[i].artImage) {
							artImage = dataList[i].artImage;
						}
						
						html += '<div class="hot_news"><a href="javascript:void(0);" onclick="openDetail('
							+ dataList[i].artId
							+ ')"><h4>' + dataList[i].artTitle + '</h4>'
							+ '<img src="' + artImage + '" alt="' + dataList[i].artTitle + '" height="140" width="250">'
							+ '<span>'+ dataList[i].artAbstract +'</span>'
							+ '<em class="more">查看详情 <var>»</var></em></a></div>';
					});
					$('#newsListxj').html(html);
				}
			})
			
		});

		function openDetail(id) {
			layer.full(
				layer.open({
					type : 2,
					title : "宣介详情",
					area : [ MUI.SIZE_L, '600px' ],
					maxmin : true,
					content : [ '${path}/admin/webArticle/toNewsForm?id=' + id ]
				})
			);
		}
	</script>
</html>